 <template>
  <BaseLayout title="请假信息管理" @query="init" @reset="reset">
    <template #query>
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="申请人">
          <el-input clearable v-model="queryForm.applyUser" placeholder="请输入申请人"/>
        </el-form-item>
        <el-form-item label="审批状态">
          <BaseSelect toNumber :options="approveStatusOptions" clearable v-model="queryForm.status" placeholder="请输入审批状态"/>
        </el-form-item>
      </el-form>
    </template>
    <template #button>
      <el-button type="primary" @click="addVacation">新增</el-button>
    </template>
    <template #table>
      <el-table v-loading="loading" :data="data" height="100%" class="w-full">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="reasons" label="请假事由" align="center" header-align="center"></el-table-column>
        <el-table-column prop="applyUserName" label="申请人" align="center" header-align="center"></el-table-column>
        <el-table-column prop="status" label="审批状态" align="center" header-align="center">
          <template #default="scope">
            <BaseTag :value="scope.row.status" :dict="approveStatusOptions"></BaseTag>
          </template>
        </el-table-column>
        <el-table-column prop="orgName" label="组织机构" align="center" header-align="center"></el-table-column>
        <el-table-column prop="comName" label="所属公司" align="center" header-align="center"></el-table-column>
        <el-table-column prop="startTime" label="假期开始时间" width="170" align="center"
                         header-align="center"></el-table-column>
        <el-table-column prop="endTime" label="假期结束时间" width="170" align="center"
                         header-align="center"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="170" align="center"
                         header-align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center" header-align="center">
          <template #default="scope">
            <el-button link type="primary" @click="startApply(scope.row.vacationId)">发起审批</el-button>
            <el-button link type="primary" @click="editVacation(scope.row.vacationId)">修改</el-button>
            <el-button link type="danger" @click="delVacation(scope.row.vacationId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <AddOrUpdateVacation @load="init" ref="addOrUpdateVacationRef"></AddOrUpdateVacation>
      <NextFlowPanel ref="nextFlowPanelRef"></NextFlowPanel>
    </template>
    <template #page>
      <BasePage @load="init" v-model:current="queryForm.current" v-model:size="queryForm.size"
                :total="queryForm.total"></BasePage>
    </template>
  </BaseLayout>
</template>

<script setup lang="ts">
import AddOrUpdateVacation from './AddOrUpdateVacation.vue'
import {nextTick, onMounted, reactive, ref} from "vue";
import {
  deleteVacationByVacationId,
  listVacationPage,
  selectVacationByVacationId,
  startVacationFlow
} from "/@/api/demo/VacationApi";
import {messageBox} from "/@/utils/BjxUtils";
import {DictDataModel} from "/@/api/system/model/DictModel";
import {VacationQueryModel, VacationModel} from "/@/api/demo/model/VacationModel";
import {ElMessage} from "element-plus";
import {useDictStore} from "/@/store/modules/dict";
const approveStatusOptions = ref<DictDataModel[]>([])
const data = ref<VacationModel[]>([])
const addOrUpdateVacationRef = ref()
const nextFlowPanelRef = ref()
const loading = ref(false)
const queryForm = reactive<VacationQueryModel>({
  applyUser: '',
  status: undefined,
  orgId: '',
  comId: '',
  size: 10,
  current: 1,
  total: 0
})
const init = async () => {
  loading.value = true
  let res = await listVacationPage({...queryForm}, () => {
    loading.value = false
  })
  data.value = res.records
  queryForm.size = res.size
  queryForm.current = res.current
  queryForm.total = res.total
}
/**
 * 新增请假信息
 */
const addVacation = () => {
  addOrUpdateVacationRef.value.init("新增请假信息")
}
/**
 * 修改请假信息
 */
const editVacation = async (vacationId: string) => {
  loading.value = true
  let res = await selectVacationByVacationId(vacationId)
  addOrUpdateVacationRef.value.init("修改请假信息", res)
  loading.value = false
}
/**
 * 启动审批
 * @param vacationId
 */
const startApply = async (vacationId: string) => {
  nextFlowPanelRef.value.firstNode("b8c03528-a1d4-4f3c-ba1d-1d67c64f0bec")
  // loading.value = true
  // let res = await selectVacationByVacationId(vacationId)
  // await startVacationFlow(res,()=>{
  //   loading.value = false
  // });

}
/**
 * 删除请假信息
 */
const delVacation = async (vacationId: string) => {
  messageBox("您确定要删除这个请假信息吗?", async () => {
    loading.value = true
    await deleteVacationByVacationId(vacationId, () => {
      loading.value = false
    })
    init()
  })

}
/**
 * 重置
 */
const reset = () => {
  queryForm.applyUser = '',
      queryForm.status = 1,
      queryForm.orgId = '',
      queryForm.comId = '',
      queryForm.current = 1
  init()
}
onMounted(async () => {
  let dictStore = useDictStore();
  approveStatusOptions.value = await dictStore.getDict('approve_status')
  nextTick(() => {
    init()
  })

})
</script>

<style scoped>

</style>